<template>
	<div>
		<el-container>
		  <el-aside width="220px" style="background-color: #fff; border: 1px solid #e5e5e5; margin-right: 20px;">
			  <el-menu
			      class="el-menu-vertical-demo"
				 style="margin-top: 0; height: auto; border-right: 0;"
			    >
			      <el-sub-menu index="基础档案">
			        <template #title>
					  <el-icon><FolderOpened /></el-icon>
			          <span>组织架构</span>
			        </template>
			        <el-sub-menu index="海口分公司">
			          <template #title>
			  			<el-icon><FolderOpened /></el-icon>
			  			<span>海口分公司</span>
			  		</template>
			          <el-menu-item index="后勤部"><el-icon><DocumentRemove /></el-icon>后勤部</el-menu-item>
					  <el-menu-item index="销售部"><el-icon><DocumentRemove /></el-icon>销售部</el-menu-item>
			        </el-sub-menu>
					<el-sub-menu index="三亚分公司">
					  <template #title>
						<el-icon><FolderOpened /></el-icon>
						<span>三亚分公司</span>
					</template>
					  <el-menu-item index="后勤部"><el-icon><DocumentRemove /></el-icon>后勤部</el-menu-item>
					  <el-menu-item index="销售部"><el-icon><DocumentRemove /></el-icon>销售部</el-menu-item>
					</el-sub-menu>
			      </el-sub-menu>
			  </el-menu>
		  </el-aside>
		  <el-main style="background-color: #FFF;">
			  <el-row :gutter="20">
			  	<el-col :span="12" class="flex-row-left">
			  		<el-input class="w-200 mr-10" placeholder="输入名称搜索" clearable />
			  		<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			  	</el-col>			
			  	<el-col :span="12" class="flex-row-right">
			  		<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
					<el-button plain @click="add"><el-icon class="mr-5"><Download /></el-icon>导入</el-button>
					<el-button plain @click="add"><el-icon class="mr-5"><Upload /></el-icon>导出</el-button>
			  		<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			  	</el-col>
			   </el-row>
			   <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
			   	<el-table-column type="selection" width="55" />	
			   	<el-table-column prop="id" label="ID"  width="55"/>
			   	<el-table-column prop="id" label="序号"  />
			   	<el-table-column prop="id" label="人员编码" width="120" />
			   	<el-table-column prop="id" label="所属部门" width="120"/>
			   	<el-table-column prop="id" label="所属分部" width="120"/>
			   	<el-table-column prop="id" label="入职日期" width="120"/>
				<el-table-column prop="id" label="手机" width="120"/>
				<el-table-column prop="id" label="性别" width="120"/>
				<el-table-column prop="id" label="民族" width="120"/>
				<el-table-column prop="id" label="户籍" width="120"/>
				<el-table-column prop="id" label="出生地" width="120"/>
				<el-table-column prop="id" label="身份证号" width="120"/>
				<el-table-column prop="id" label="婚姻状况" width="120"/>
				<el-table-column prop="id" label="健康状况" width="120"/>
				<el-table-column prop="id" label="工作类型" width="120"/>
				<el-table-column prop="id" label="工作性质" width="120"/>
				<el-table-column prop="id" label="试用结束" width="120"/>
				<el-table-column prop="id" label="合同开始" width="120"/>
				<el-table-column prop="id" label="离职日期" width="120"/>
				<el-table-column prop="id" label="雇佣状态" width="120"/>
				<el-table-column prop="id" label="用户类型" width="120"/>
				<el-table-column prop="id" label="电话号" width="120"/>
				<el-table-column prop="id" label="公司邮箱" width="120"/>
				<el-table-column prop="id" label="个人邮箱" width="120"/>
				<el-table-column prop="id" label="生日" width="120"/>
				<el-table-column prop="id" label="学位" width="120"/>
				<el-table-column prop="id" label="政治面貌" width="120"/>
			   	<el-table-column fixed="right" label="操作" width="240">
			   	  <template #default>
			  		<el-button type="warning" plain><el-icon class="mr-5"><EditPen /></el-icon>编辑</el-button>
			  		<el-button><el-icon class="mr-5"><Delete /></el-icon>删除</el-button>
			   	  </template>
			   	</el-table-column>
			   </el-table>
			   <div class="flex-row-right mt-20">
			  	 <el-pagination
			  	   :page-sizes="[100, 200, 300, 400]"
			  	   layout="total, sizes, prev, pager, next, jumper"
			  	   :total="400"
			  	 />
			   </div>
			   <cateForm 
			   :dialogVisible="dialogVisible" 
			   :width="40" 
			   @dialogVisibleByValue="dialogVisibleByValue"  
			   ref="cateForm"
			   />
		  </el-main>
		</el-container>
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {
				loading:true,
				dialogVisible:false,
				value5:false,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: 1,
				      },
				      {
				    	id: 2,
				      },
				      {
				    	id: 3,
				      },
				      {
				    	id: 4,
				      },
				      {
				    	id: 5,
				      },
				      {
				      	id: 6,
				      },
				      {
				      	id: 7,
				      },
				      {
				      	id: 8,
				      },
				      {
				      	id: 9,
				      },
				      {
				      	id: 10,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
</style>